<!-- 采用html5  -->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <!-- 页面显示适应移动设备 -->
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>我的APP</title>

    <link rel="stylesheet" href="resources\we-vue\style.css">
    <link rel="stylesheet" href="resources\css\font-awesome.min.css">

    <style>
        /*元素选择器*/

        html{
            height:100%;
        }
        body{
            height:100%;
            padding:0px;/*内边距*/
            margin:0px;/*外边距*/
        }
        .my-container{
            position: relative;
            width:100%;
            height:100%;
            background-color: #f0f0f0;
        }
        .my-content{
            position:absolute;
            top:53px;
            bottom:0px;
            box-sizing: border-box;
            width:100%;
            padding:3px;
            
            overflow: auto;
        }
        .my-checkbox{
            display: inline-block;
            width:24px;
            height:24px;
            border-radius:15px;
            border:1px solid #DDDDDD;            
        }
        .my-checkbox.checked{
            background-image:url(resources/images/ok2.jpg);
            background-size: 100% 100%;
            border:1px solid #DD0000;
        }
        .my-title{
            font-size:30px;
            text-align: center;/*水平居中*/
            color:#111111;
            padding-top:10px;
            padding-bottom:0px;
        }

    </style>

</head>

<body>

    <div id="app" class="my-container">

        <wv-header :fixed="false" title="购物车" background-color="#ff0033">
            <div slot="left">
                <i @click="back" class="fa fa-angle-left"></i>
            </div>

        </wv-header>

        <wv-tabbar>
            <wv-tabbar-item>
                <i class="fa fa-credit-card-alt" @click="buy"></i>
                <br />结算
            </wv-tabbar-item>

            <wv-tabbar-item @click="toperson">
                <i class="fa fa-user"></i>
                <br />{{UserName}}
            </wv-tabbar-item>
        </wv-tabbar>
        <!-- 清单界面 -->
        <div v-show="currPage=='list'" class="my-content">
            <wv-panel style="border-radius:5px;" v-for="dep in deps" :key="dep.k_id" :title="'订单编号：'+dep.k_id">

                <wv-media-box :title="dep.k_p_name" :description="dep.k_p_price" type="text"></wv-media-box>

                <div slot="ft" style="display:flex;flex-direction: row; justify-content:space-between; padding-bottom:10px;padding-right:5px;">
                    <div></div>
                    <div>
                        <wv-button type="warn" :mini="true" @click="depDoDel(dep)">删除</wv-button>
                    </div>
                </div>
            </wv-panel>
        </div>
    </div>
</body>

<script src="resources\js\vue.min.js"></script>
<script src="resources\js\jquery.min.js"></script>
<script src="resources\we-vue\index.js"></script>
<script src="resources\layer_mobile\layer.js"></script>
<script src="resources\js\my.js"></script>

<script>

    new Vue({
        el: '#app',
        data: {
            UserName: '',
            currPage: 'list',
            deps: [],//清单数据
            uDep: {},//编辑数据
            nDep: {},//新增数据
            checkedDids: [],//选中的id
        },
        methods: {
            loadList() {
                Serv.loadData({ url: '/depList.jsp' }, (deps) => {
                    this.deps = deps;
                });
            },

            back() {
                if (this.currPage == 'list') {
                    window.location.href = 'home.html';
                } else if (this.currPage == 'upd' || this.currPage == 'add') {
                    this.currPage = 'list';
                }
            },
            toperson() {
                window.location.href = 'person.html';
            },

            depDoDel(dep) {
                Serv.operate(
                    {
                        title: '警告',
                        text: '您确实要删除吗？',
                        url: '/depDoDel.jsp',
                        data: dep
                    },
                    () => {
                        this.loadList();
                    });
            },
            buy() {
                Serv.operate({ url: '/buyall.jsp', },
                () => {
                        setTimeout(
                            () => {
                                //通过js向另一个页面跳转
                                window.location.href = 'basket.html';
                            },
                            1000
                        );
                    }
                );
            },
        },
        mounted() {
            Serv.loadText({ url: '/name.jsp' }, (data) => {
                this.UserName = data;
            });
            this.loadList();//获取清单数据
        }
    });

</script>

</html>